<h2>Autocomplete</h2>
<mat-autocomplete>
  <mat-option>Grace Hopper</mat-option>
  <mat-option>Anita Borg</mat-option>
  <mat-option>Ada Lovelace</mat-option>
</mat-autocomplete>

<h2>Button</h2>

<button mat-button>go</button>
<button mat-icon-button><mat-icon>search</mat-icon></button>
<button mat-raised-button>go</button>
<button mat-fab><mat-icon>home</mat-icon></button>
<button mat-mini-fab><mat-icon>favorite</mat-icon></button>

<a mat-button href="https://google.com">Google</a>
<a mat-icon-button href="https://google.com"><mat-icon>search</mat-icon></a>
<a mat-raised-button href="https://google.com">Google</a>
<a mat-fab href="https://google.com"><mat-icon>home</mat-icon></a>
<a mat-mini-fab href="https://google.com"><mat-icon>favorite</mat-icon></a>

<h2>Button toggle</h2>

<h3>Single selection</h3>
<mat-button-toggle-group>
  <mat-button-toggle>Ketchup</mat-button-toggle>
  <mat-button-toggle>Mustard</mat-button-toggle>
  <mat-button-toggle>Mayo</mat-button-toggle>
</mat-button-toggle-group>

<h3>Multi selection</h3>
<mat-button-toggle-group multiple>
  <mat-button-toggle>Ketchup</mat-button-toggle>
  <mat-button-toggle>Mustard</mat-button-toggle>
  <mat-button-toggle>Mayo</mat-button-toggle>
</mat-button-toggle-group>

<h3>Standalone</h3>
<mat-button-toggle>Hyperspinner enabled</mat-button-toggle>

<h3>Card</h3>

<mat-card>
  Simple card
</mat-card>

<mat-card>
  <mat-card-title>Complicated card</mat-card-title>
  <mat-card-subtitle>Subtitle</mat-card-subtitle>
  <mat-card-content>
    <p>This is some stuff</p>
    <p>And more stuff</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
  <mat-card-footer>
    Hurray
  </mat-card-footer>
</mat-card>

<h2>Checkbox</h2>

<mat-checkbox>With a label</mat-checkbox>
<mat-checkbox></mat-checkbox>Without a label

<h2>Chips</h2>

<mat-chip-list>
  <mat-chip>Barbeque Cheddar</mat-chip>
  <mat-chip>Sea Salt and Vinegar</mat-chip>
  <mat-chip>Manta Ray</mat-chip>
</mat-chip-list>

<mat-chip-list>
  <mat-basic-chip>Tomato</mat-basic-chip>
  <mat-basic-chip>Scallion</mat-basic-chip>
  <mat-basic-chip>Cilantro</mat-basic-chip>
</mat-chip-list>

<h2>Datepicker</h2>

<mat-form-field>
  <input type="text" matInput [matDatepicker]="birthday" placeholder="Birthday">
  <mat-datepicker-toggle matSuffix [for]="birthday"></mat-datepicker-toggle>
  <mat-datepicker #birthday></mat-datepicker>
</mat-form-field>

<h2>Disabled datepicker</h2>

<mat-form-field>
  <input type="text" disabled matInput [matDatepicker]="departureDate" placeholder="Departure date">
  <mat-datepicker-toggle matSuffix [for]="departureDate"></mat-datepicker-toggle>
  <mat-datepicker #departureDate></mat-datepicker>
</mat-form-field>

<h2>Grid list</h2>

<mat-grid-list cols="4">
  <mat-grid-tile>Fry</mat-grid-tile>
  <mat-grid-tile>Leela</mat-grid-tile>
  <mat-grid-tile>Amy</mat-grid-tile>
  <mat-grid-tile>Bender</mat-grid-tile>
</mat-grid-list>

<h2>Icon</h2>
<mat-icon>grade</mat-icon>

<h2>Input</h2>

<mat-form-field floatLabel="never">
  <input matInput placeholder="name" type="text">
</mat-form-field>

<mat-form-field appearance="outline">
  <mat-label>Surname</mat-label>
  <input matInput value="Baggins">
</mat-form-field>

<mat-form-field>
  <textarea matInput placeholder="description"></textarea>
</mat-form-field>

<mat-form-field>
  <input type="number" matInput placeholder="amount">
  <span matPrefix>$&nbsp;</span>
  <span matSuffix>.00</span>
  <mat-hint>Dolla dolla bills</mat-hint>
  <mat-error>Recession</mat-error>
</mat-form-field>

<h2>List</h2>

<mat-list>
  <mat-list-item>Robot</mat-list-item>
  <mat-list-item>Android</mat-list-item>
  <mat-list-item>Cyborg</mat-list-item>
</mat-list>

<mat-nav-list>
  <a mat-list-item href="https://google.com">Search</a>
  <a mat-list-item href="https://google.com">Find</a>
  <a mat-list-item href="https://google.com">Seek</a>
</mat-nav-list>

<mat-action-list>
  <button mat-list-item>First action</button>
  <button mat-list-item>Second action</button>
  <button mat-list-item>Third action</button>
</mat-action-list>

<h2>Menu</h2>

<button mat-button [matMenuTriggerFor]="menu">Open</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Mercy</button>
  <button mat-menu-item>Lucio</button>
  <button mat-menu-item disabled>Sombra</button>
</mat-menu>

<h2>Progress bar</h2>

<mat-progress-bar value="25"></mat-progress-bar>
<mat-progress-bar mode="buffer" value="25" [bufferValue]="60"></mat-progress-bar>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
<mat-progress-bar mode="query"></mat-progress-bar>

<h2>Progress spinner</h2>

<mat-progress-spinner mode="indeterminate" [diameter]="32"></mat-progress-spinner>
<mat-progress-spinner mode="determinate" [value]="60"></mat-progress-spinner>

<h2>Radio buttons</h2>

<h3>Radio group</h3>
<mat-radio-group>
  <mat-radio-button>Charmander</mat-radio-button>
  <mat-radio-button>Squirtle</mat-radio-button>
  <mat-radio-button>Bulbasaur</mat-radio-button>
</mat-radio-group>

<h3>Standalone radios</h3>
<mat-radio-button name="onions">White</mat-radio-button>
<mat-radio-button name="onions">Yellow</mat-radio-button>
<mat-radio-button name="onions">Green</mat-radio-button>
<mat-radio-button name="onions" disabled>Red</mat-radio-button>

<h2>Select</h2>
<mat-form-field>
  <mat-select value="ceramic">
    <mat-option value="glass">Glass</mat-option>
    <mat-option value="ceramic">Ceramic</mat-option>
    <mat-option value="steel">Steel</mat-option>
  </mat-select>
</mat-form-field>

<h2>Sidenav</h2>
<mat-sidenav-container>
  <mat-sidenav opened>
    On the side
    <button>Button for testing focus trapping</button>
  </mat-sidenav>
  Main content
  <button>Click me</button>
</mat-sidenav-container>

<h2>Slide-toggle</h2>
<mat-slide-toggle>With a label</mat-slide-toggle>
<mat-slide-toggle></mat-slide-toggle>Without a label

<h2>Slider</h2>
<mat-slider></mat-slider>
<mat-slider value="50"></mat-slider>
<mat-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></mat-slider>
<mat-slider disabled></mat-slider>

<h2>Tabs</h2>
<mat-tab-group>
  <mat-tab label="Overview">
    The overview
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      API docs
    </ng-template>
    The API docs
  </mat-tab>
</mat-tab-group>

<nav mat-tab-nav-bar>
 <a mat-tab-link href="https://google.com">Google</a>
 <a mat-tab-link href="https://google.com" [active]="true">Also Google</a>
</nav>

<h2>Paginator</h2>

<mat-paginator [length]="100"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

<h2>Toolbar</h2>
<mat-toolbar>Basic toolbar</mat-toolbar>
<mat-toolbar>
  <mat-toolbar-row>Multi row</mat-toolbar-row>
  <mat-toolbar-row>Toolbar</mat-toolbar-row>
</mat-toolbar>

<h2>Sort</h2>

<table matSort>
  <tr>
    <th mat-sort-header="name">Name</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat</th>
    <th mat-sort-header="carbs">Carbs</th>
    <th mat-sort-header="protein">Protein</th>
  </tr>

  <tr>
    <td>Cupcake</td>
    <td>305</td>
    <td>4</td>
    <td>67</td>
    <td>4</td>
  </tr>
</table>

<h2>Tooltip</h2>

<button matTooltip="Action!">Go</button>

<h2>Autosize textarea</h2>
<textarea cdkTextareaAutosize cdkAutosizeMaxRows="10"></textarea>

<h2>Expansion Panel</h2>
<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-description>This is a panel description.</mat-panel-description>
    <mat-panel-title>Panel Title</mat-panel-title>
  </mat-expansion-panel-header>
  This is the content text that makes sense here.
  <mat-action-row>Action</mat-action-row>
</mat-expansion-panel>

<h2>CDK Table</h2>

<cdk-table #table [dataSource]="tableDataSource">
  <ng-container cdkColumnDef="userId">
    <cdk-header-cell *cdkHeaderCellDef>ID</cdk-header-cell>
    <cdk-cell *cdkCellDef="let row">{{row.userId}}</cdk-cell>
  </ng-container>

  <cdk-header-row *cdkHeaderRowDef="tableColumns" ></cdk-header-row>
  <cdk-row *cdkRowDef="let row; columns: tableColumns;"></cdk-row>
</cdk-table>

<h2>Material Table</h2>

<mat-table [dataSource]="tableDataSource">
  <ng-container matColumnDef="userId">
    <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.userId}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: tableColumns;"></mat-row>
</mat-table>

<h2>Native table with sticky header and footer</h2>

<table mat-table [dataSource]="tableDataSource">
  <ng-container matColumnDef="userId">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let row">{{row.userId}}</td>
    <td mat-footer-cell *matFooterCellDef>ID</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="tableColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
  <tr mat-footer-row *matFooterRowDef="tableColumns; sticky: true"></tr>
</table>


<h2>Selection list</h2>
<mat-selection-list>
  <h3 mat-subheader>Groceries</h3>
  <mat-list-option value="apples">Apples</mat-list-option>
  <mat-list-option value="bananas">Bananas</mat-list-option>
  <mat-list-option value="oranges">Oranges</mat-list-option>
</mat-selection-list>

<h2>Vertical Stepper</h2>

<mat-vertical-stepper>
  <mat-step label="Step 1">Content 1</mat-step>
  <mat-step label="Step 1">Content 2</mat-step>
</mat-vertical-stepper>

<h2>Vertical Stepper (with label template)</h2>

<mat-vertical-stepper>
  <mat-step>
    <ng-template matStepLabel>NgTemplate Label #1</ng-template>
    Content 1
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>NgTemplate Label #2</ng-template>
    Content 2
  </mat-step>
</mat-vertical-stepper>

<h2>Horizontal Stepper</h2>

<mat-horizontal-stepper>
  <mat-step label="Step 1">Content 1</mat-step>
  <mat-step label="Step 2">Content 2</mat-step>
</mat-horizontal-stepper>

<h2>Focus trap</h2>

<div cdkTrapFocus cdkTrapFocusAutoCapture>
  <button>Oh no, I'm trapped!</button>
</div>

<h2>Badge</h2>

<button mat-raised-button matBadge="99">
  Clicky thing
</button>

<h2>Drag and Drop</h2>
<button cdkDrag>Drag me around</button>

<ul cdkDropList>
  <li cdkDrag>One</li>
  <li cdkDrag>Two</li>
</ul>

<h2>Virtual scroll</h2>

<cdk-virtual-scroll-viewport itemSize="50" class="universal-viewport">
  <div *cdkVirtualFor="let size of virtualScrollData; let i = index" style="height: 50px;">
    Item #{{i}}
  </div>
</cdk-virtual-scroll-viewport>

<h2>YouTube player</h2>
<youtube-player videoId="dQw4w9WgXcQ"></youtube-player>

<h2>Google Map</h2>
<google-map height="400px" width="750px">
  <map-marker [position]="{lat: 24, lng: 12}"></map-marker>
  <map-info-window>Hello</map-info-window>
  <map-polyline [options]="{
    path: [{lat: 25, lng: 26}, {lat: 26, lng: 27}, {lat: 30, lng: 34}],
    strokeColor: 'grey',
    strokeOpacity: 0.8
  }"></map-polyline>
  <map-polygon [options]="{
    paths: [{lat: 20, lng: 21}, {lat: 22, lng: 23}, {lat: 24, lng: 25}],
    strokeColor: 'grey',
    strokeOpacity: 0.8
  }"></map-polygon>
  <map-rectangle [options]="{
    bounds: {east: 30, north: 15, west: 10, south: -5},
    strokeColor: 'grey',
    strokeOpacity: 0.8
  }"></map-rectangle>
  <map-circle [options]="{
    center: {lat: 19, lng: 20},
    radius: 500000,
    strokeColor: 'grey',
    strokeOpacity: 0.8
  }"></map-circle>
  <map-ground-overlay
    url="https://angular.io/assets/images/logos/angular/angular.svg"
    [bounds]="{
      east: 30,
      north: 15,
      west: 10,
      south: -5
    }"></map-ground-overlay>
    <map-kml-layer
      url="https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml"></map-kml-layer>
    <map-traffic-layer></map-traffic-layer>
    <map-transit-layer></map-transit-layer>
    <map-bicycling-layer></map-bicycling-layer>
    <map-heatmap-layer [data]="[
      {lat: 37.782, lng: -122.447},
      {lat: 37.782, lng: -122.445},
      {lat: 37.782, lng: -122.443}
    ]"></map-heatmap-layer>

    <map-marker-clusterer imagePath="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m">
      <map-marker [position]="{lat: 24, lng: 12}"></map-marker>
      <map-marker [position]="{lat: 12, lng: 24}"></map-marker>
      <map-marker [position]="{lat: 12, lng: 12}"></map-marker>
    </map-marker-clusterer>
</google-map>
